<template>
  <view class="list-container">
    <view 
      class="article-item"
      v-for="item in articles"
      :key="item.id"
      @click="navigateToDetail(item.id)"
    >
      <image class="article-image" :src="item.coverImg" mode="aspectFill"></image>
      <view class="article-content">
        <text class="article-title">{{ item.title }}</text>
        <text class="article-preview">{{ item.content }}</text>
        <view class="article-meta">
          <text class="meta-time">{{ item.publishTime }}</text>
          <text class="meta-views">阅读 {{ item.views }}</text>
        </view>
      </view>
    </view>
	  <view style="text-align: center;color: gray;">没有更多数据了</view>
  </view>

</template>

<script>
export default {
  data() {
    return {
      articles: [
        {
           id: 4,
           title: '谷雨节气!',
           content: '最近细菌感染的孩子增多（细菌感染引起的鼻窦炎，扁桃体炎',
           coverImg: 'http://img.osako.top/xiaoen/guyu.jpg',
           publishTime: '2024-04-16',
           views: 215
         },
	   {
          id: 3,
          title: '春季必知!',
          content: '小儿推拿疏肝调理脾胃秘籍春天到啦，万物复苏，咱们宝贝们也到了生长发育的黄金期.',
          coverImg: 'http://img.osako.top/xiaoen/text1.jpg',
          publishTime: '2024-03-04',
          views: 283
        },
		{
		  id: 2,
		  title: '儿童常见病的推拿调理',
		  content: '针对儿童感冒、发烧等常见病症，推拿可以起到很好的辅助治疗效果...',
		  coverImg: 'http://img.osako.top/xiaoen/2.jpg',
		  publishTime: '2024-03-14',
		  views: 156
		},
		 {
		   id: 1,
		   title: '小儿推拿常用手法解析',
		   content: '小儿推拿是中医传统疗法之一，通过特定的手法刺激穴位...（完整内容）',
		   coverImg: 'http://img.osako.top/xiaoen/1.jpg',
		   publishTime: '2024-03-15',
		   views: 123
		 },
        // 更多静态数据...
      ]
    }
  },
  filters: {
    textPreview(value) {
      return value.length > 50 ? value.substring(0, 50) + '...' : value
    }
  },
  methods: {
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/article/detail?id=${id}`
      })
    }
  }
}
</script>

<!-- 修正后的推文列表页样式 -->
<style scoped>
/* 所有选择器改为class选择器 */
.list-container {
  padding: 20rpx 0;
  background-color: #f8f8f8;
}

.article-item {
  display: flex;
  padding: 20rpx;
  margin: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.article-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.article-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.article-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.article-preview {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
  margin-top: 15rpx;
}
</style>